<template>
  <div class="order-approval">
    <el-card shadow="hover">
      <template #header>
        <span>订单审核</span>
      </template>

      <!-- 搜索和筛选区域 -->
      <div class="search-box">
        <el-form :inline="true" :model="searchForm" size="small">
          <el-form-item label="状态" style="width: 200px">
            <el-select v-model="searchForm.status" placeholder="请选择状态">
              <el-option label="待确认" value="0" />
              <el-option label="已确认" value="1" />
              <el-option label="已完成" value="2" />
              <el-option label="已取消" value="3" />
              <el-option label="超时未取车" value="4" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 订单列表 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :default-sort="{ prop: 'createtime', order: 'descending' }"
      >
        <el-table-column prop="bcid" label="预约ID" width="80" />
        <el-table-column prop="userid" label="用户ID" width="100" />
        <el-table-column prop="cdid" label="车辆ID" width="100" />
        <el-table-column prop="carname" label="车辆名称" width="150" />
        <el-table-column prop="starttime" label="开始时间" width="180" />
        <el-table-column prop="endtime" label="结束时间" width="180" />
        <el-table-column prop="status" label="状态" width="120">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)" disable_transitions>
              {{ getStatusText(row.status) }}
            </el-tag>
            <el-button
              v-if="row.status === 1"
              size="small"
              type="primary"
              @click="handleUpdateStatus(row)"
            >
              发货
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="createtime" label="创建时间" width="180" />
        <el-table-column prop="updatetime" label="更新时间" width="180" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="sellername" label="卖家" width="120" />
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button size="small" type="text" @click="handleViewOrder(row)">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 查看订单详情对话框 -->
    <el-dialog
      title="订单详情"
      v-model="dialogVisible"
      width="600px"
      :before-close="handleCloseDialog"
    >
      <div v-if="selectedOrder">
        <el-form label-width="100px">
          <el-form-item label="预约ID">
            <span>{{ selectedOrder.bcid }}</span>
          </el-form-item>
          <el-form-item label="用户ID">
            <span>{{ selectedOrder.userid }}</span>
          </el-form-item>
          <el-form-item label="车辆ID">
            <span>{{ selectedOrder.cdid }}</span>
          </el-form-item>
          <el-form-item label="车辆名称">
            <span>{{ selectedOrder.cname }}</span>
          </el-form-item>
          <el-form-item label="开始时间">
            <span>{{ selectedOrder.starttime }}</span>
          </el-form-item>
          <el-form-item label="结束时间">
            <span>{{ selectedOrder.endtime }}</span>
          </el-form-item>
          <el-form-item label="状态">
            <el-tag :type="getStatusType(selectedOrder.status)">
              {{ getStatusText(selectedOrder.status) }}
            </el-tag>
          </el-form-item>
          <el-form-item label="创建时间">
            <span>{{ selectedOrder.createtime }}</span>
          </el-form-item>
          <el-form-item label="更新时间">
            <span>{{ selectedOrder.updatetime }}</span>
          </el-form-item>
          <el-form-item label="备注">
            <span>{{ selectedOrder.remark }}</span>
          </el-form-item>
          <el-form-item label="卖家">
            <span>{{ selectedOrder.sellername }}</span>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

    <!-- 确认修改状态对话框 -->
    <el-dialog
      title="确认修改状态"
      v-model="confirmDialogVisible"
      width="400px"
    >
      <div>
        <p>确定该订单车辆充足吗？</p>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="confirmDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmUpdateStatus">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import api from "@/util/service";
import { ElMessage } from "element-plus";
import { useLoginStore } from "@/stores/userStores";
const userStore = useLoginStore();
// 表格数据
const tableData = ref([]);

// 搜索表单
const searchForm = reactive({
  userid: userStore.getId,
  status: "",
});

// 对话框控制
const dialogVisible = ref(false);
const confirmDialogVisible = ref(false);
const selectedOrder = ref(null);

// 当前选中的订单
const currentOrder = ref(null);

// 获取订单列表
const fetchOrderList = async () => {
  try {
    const response = await api.post(
      "/tbookcar/selectBookcarBySeller",
      searchForm
    );

    if (response.code === 200) {
      tableData.value = response.data;
    }
  } catch (error) {
    console.error("获取订单列表失败:", error);
  }
};

// 搜索
const handleSearch = () => {
  fetchOrderList();
};

// 重置搜索
const resetSearch = () => {
  searchForm.status = "";
  fetchOrderList();
};

// 查看订单详情
const handleViewOrder = (row) => {
  selectedOrder.value = row;
  dialogVisible.value = true;
};

// 关闭对话框
const handleCloseDialog = () => {
  dialogVisible.value = false;
  selectedOrder.value = null;
};

// 修改状态
const handleUpdateStatus = (row) => {
  currentOrder.value = row;
  confirmDialogVisible.value = true;
};

// 确认修改状态
const confirmUpdateStatus = async () => {
  const params = {
    bcid: currentOrder.value.bcid,
    status: 2, // 确认为已完成
  };
  try {
    const response = await api.post("/tbookcar/updateBookcar", params);

    if (response.code === 200) {
      ElMessage.success("状态修改成功");
      confirmDialogVisible.value = false;
      fetchOrderList(); // 刷新列表
    } else {
      ElMessage.error("状态修改失败");
    }
  } catch (error) {
    console.error("修改状态失败:", error);
    ElMessage.error("网络错误，请重试");
  }
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: "待确认",
    1: "已确认",
    2: "已完成",
    3: "已取消",
    4: "超时未取车",
  };
  return statusMap[status] || "未知状态";
};

// 获取状态标签类型
const getStatusType = (status) => {
  switch (status) {
    case 0:
      return "info";
    case 1:
      return "success";
    case 2:
      return "success";
    case 3:
      return "danger";
    case 4:
      return "warning";
    default:
      return "info";
  }
};

// 初始化
fetchOrderList();
</script>

<style scoped>
.order-approval {
  padding: 20px;
}

.search-box {
  margin-bottom: 20px;
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
